<template>
	<view>
		<view class="toptab zl-flex zl-row-around">
			<view :class="current===0?'tab_item':'tab_item opc'" @click="changetab(0)">
				<view class="">
					可用资源
				</view>
				<view :class="current===0?'line':'line_fff'">
				</view>
			</view>
			<view :class="current===1?'tab_item':'tab_item opc'" @click="changetab(1)">
				<view class="">
					不可用资源
				</view>
				<view :class="current===1?'line':'line_fff'">
				</view>
			</view>

		</view>
		<view class="list">
			<z-paging ref="paging" v-model="list" @query="queryList" :fixed="false" :auto-clean-list-when-reload="false"
				:auto="true" :paging-style="{ height:'100%' }" :show-refresher-when-reload="true"
				:default-page-size="10" :hide-empty-view="true">
				<view class="box1" v-if="current===0">
					<view class="box_item1" v-for="(item,index) in list" :key="index">
						<view class="zl-flex-col">
							<view class="zl-flex">
								<view style="width: 120rpx;height: 120rpx;position: relative;">
									<image src="../../static/my/pack01.png" v-if="item.status===1" mode="" class="play"
										style="width: 120rpx;height: 120rpx;">
									</image>
									<image src="../../static/my/pack02.png" v-else mode="" class="play"
										style="width: 120rpx;height: 120rpx;">
									</image>
									<view v-if="item.status===1"
										style="position: absolute;bottom: 10rpx;left:50%;transform: translate(-50%);color:#fff;font-size:22rpx;width: 120rpx;text-align: center;">
										生效中</view>
									<view v-else
										style="position: absolute;bottom: 10rpx;left:50%;transform: translate(-50%);color:#666666;font-size:22rpx;width: 120rpx;text-align: center;">
										{{item.status===2?"已用完":item.status===3?"已过期":item.status===4?"已作废":''}}
									</view>

								</view>
								<view class="zl-flex-col zl-m-l-28">
									<view class="zl-font-30 zl-color-000">
										卡密： {{item.cdkCode}}
									</view>
									<view class="zl-font-20 zl-color-999 zl-m-t-4" style="opacity: 0.6;">
										ID： {{item.packageId}}
									</view>
									<view class="zl-font-20 zl-color-999 zl-m-t-4" style="opacity: 0.6;">
										有效期：
										{{$util.fomateYMD(item.createTime /1000)}}～{{$util.fomateYMD(item.endTime /1000)}}
									</view>

								</view>
							</view>
							<view
								style="width: 610rpx;margin-top: 30rpx;border-bottom: 1rpx solid #D7D7D7;margin-bottom: 10rpx;">

							</view>
							<view class="zl-flex zl-row-between ">
								<view class="zl-m-t-24 zl-flex-col">
									<text class="zl-font-28 " v-if="item.digitalCount!==-99999999"
										:class="item.status===1?'red':''">{{item.digitalCount}}/{{item.maxDigitalCount}}个</text>
									<text class="zl-font-28 " v-else :class="item.status===1?'red':''">不限</text>
									<text class="zl-font-22 zl-m-t-6 zl-color-666" style="opacity: 0.6;">数字分身数量</text>
								</view>
								<view class="zl-m-t-24 zl-flex-col">
									<text class="zl-font-28 " v-if="item.voiceCount!==-99999999"
										:class="item.status===1?'red':''">{{item.voiceCount}}/{{item.maxVoiceCount}}个</text>
									<text class="zl-font-28 " v-else :class="item.status===1?'red':''">不限</text>
									<text class="zl-font-22 zl-m-t-6 zl-color-666" style="opacity: 0.6;">人声数量</text>
								</view>
								<view class=" zl-m-t-24 zl-flex-col">
									<text class="zl-font-28 "
										:class="item.status===1?'red':''">{{item.produceCount}}/{{item.maxProduceCount}}点</text>
									<text class="zl-font-22 zl-m-t-6 zl-color-666" style="opacity: 0.6;">作品生成算力</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="list.length<=0" class=" zl-flex-col zl-col-center"
						style="width: 690rpx;margin-top: 50%;">
						<image src="../../static/work/empty.png" mode="widthFix"
							style="width: 230rpx;margin-bottom: 48rpx;"></image>
						<text class="zl-font-30 zl-color-666">空空如也!</text>
					</view>

				</view>
				<view class="box1" v-else>
					<view class="box_item1" v-for="(item,index) in list" :key="index">
						<view class="zl-flex-col">
							<view class="zl-flex">
								<view style="width: 160rpx;height: 160rpx;position: relative;">
									<image src="../../static/my/pack02.png" v-if="item.status===1" mode="" class="play"
										style="width: 120rpx;height: 120rpx;">
									</image>
									<image src="../../static/my/pack01.png" v-else mode="" class="play"
										style="width: 120rpx;height: 120rpx;">
									</image>
									<view v-if="item.status===1"
										style="position: absolute;bottom: 14rpx;left:50%;transform: translate(-50%);color:#fff;font-size:22rpx">
										生效中</view>
									<view v-else
										style="position: absolute;bottom: 14rpx;left:50%;transform: translate(-50%);color:#666666;font-size:22rpx">
										{{item.status===2?"已用完":item.status===3?"已过期":item.status===4?"已作废":''}}
									</view>

								</view>
								<view class="zl-flex-col zl-m-l-28">
									<view class="zl-font-30 zl-color-000">
										卡密： {{item.cdkCode}}
									</view>
									<view class="zl-font-20 zl-color-999 zl-m-t-4" style="opacity: 0.6;">
										ID： {{item.packageId}}
									</view>
									<view class="zl-font-20 zl-color-999 zl-m-t-4" style="opacity: 0.6;">
										有效期：{{$util.fomateYMD(item.createTime /1000)}}～{{$util.fomateYMD(item.endTime /1000)}}
									</view>

								</view>
							</view>
							<view class="zl-flex zl-row-between ">
								<view class="zl-m-t-24 zl-flex-col">
									<text class="zl-font-28 " v-if="item.digitalCount!==-99999999"
										:class="item.status===1?'red':''">{{item.digitalCount}}/{{item.maxDigitalCount}}个</text>
									<text class="zl-font-28" v-else>不限</text>
									<text class="zl-font-22 zl-m-t-6 zl-color-666" style="opacity: 0.6;">数字分身数量</text>
								</view>
								<view class="zl-m-t-24 zl-flex-col">
									<text class="zl-font-28 " v-if="item.digitalCount!==-99999999"
										:class="item.status===1?'red':''">{{item.voiceCount}}/{{item.maxVoiceCount}}个</text>
									<text class="zl-font-28" v-else>不限</text>
									<text class="zl-font-22 zl-m-t-6 zl-color-666" style="opacity: 0.6;">人声数量</text>
								</view>
								<view class=" zl-m-t-24 zl-flex-col">
									<text class="zl-font-28 "
										:class="item.status===1?'red':''">{{item.produceCount}}/{{item.maxProduceCount}}分钟</text>
									<text class="zl-font-22 zl-m-t-6 zl-color-666" style="opacity: 0.6;">作品生成时长</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="list.length<=0" class=" zl-flex-col zl-col-center"
						style="width: 690rpx;margin-top: 50%;">
						<image src="../../static/work/empty.png" mode="widthFix"
							style="width: 230rpx;margin-bottom: 48rpx;"></image>
						<text class="zl-font-30 zl-color-666">空空如也!</text>
					</view>

				</view>
			</z-paging>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [],
			};
		},
		onLoad() {

		},
		methods: {
			changetab(tab) {
				this.current = tab
				this.$refs.paging.clear()
				this.$refs.paging.reload()
			},
			queryList(page, limit) {
				let par = {
					page: page,
					limit: limit,
					status: this.current === 0 ? 0 : 5
				}
				if (this.current === 0) {
					this.api.account.getassetpackagelist(par).then(res => {
						if (res.code === 0) {
							this.$refs.paging.complete(res.data.list);
						} else {
							// let arr = [{
							// 		name: '555',
							// 		status: 2,
							// 		digitalCount: 10,
							// 		maxDigitalCount: 10,
							// 		voiceCount: 1,
							// 		maxVoiceCount: 10,
							// 		produceCount: 11,
							// 		maxProduceCount: 12,
							// 		endTime: '2024-09-28 ',
							// 		createTime: ' 2024-10-08'

							// 	},
							// 	{
							// 		name: '555',
							// 		status: 3,
							// 		digitalCount: 10,
							// 		maxDigitalCount: 10,
							// 		voiceCount: 1,
							// 		maxVoiceCount: 10,
							// 		produceCount: 11,
							// 		maxProduceCount: 12,
							// 		endTime: '2024-09-28',
							// 		createTime: ' 2024-10-08'
							// 	},
							// 	{
							// 		name: '555',
							// 		status: 1,
							// 		digitalCount: 10,
							// 		maxDigitalCount: 10,
							// 		voiceCount: 1,
							// 		maxVoiceCount: 10,
							// 		produceCount: 11,
							// 		maxProduceCount: 12,
							// 		endTime: '2024-09-28',
							// 		createTime: ' 2024-10-08'
							// 	}
							// ]
							// this.$refs.paging.complete(arr);
							this.$util.msg(res.msg);
							this.$refs.paging.complete(false);
						}
					}).catch(err => {
						this.$util.msg('请检查网络连接！');
						this.$refs.paging.complete(false);
					})
				} else {
					this.api.account.getassetpackagelist(par).then(res => {
						if (res.code === 0) {
							// console.log(res, 'res.msg');
							this.$refs.paging.complete(res.data.list);
						} else {
							// let arr = [{
							// 		name: '555',
							// 		status: 2,
							// 		digitalCount: 10,
							// 		maxDigitalCount: 10,
							// 		voiceCount: 1,
							// 		maxVoiceCount: 10,
							// 		produceCount: 11,
							// 		maxProduceCount: 12,
							// 		endTime: '2024-09-28 至 2024-10-08'
							// 	},
							// 	{
							// 		name: '555',
							// 		status: 3,
							// 		digitalCount: 10,
							// 		maxDigitalCount: 10,
							// 		voiceCount: 1,
							// 		maxVoiceCount: 10,
							// 		produceCount: 11,
							// 		maxProduceCount: 12,
							// 		endTime: '2024-09-28 至 2024-10-08'
							// 	},
							// 	{
							// 		name: '555',
							// 		status: 1,
							// 		digitalCount: 10,
							// 		maxDigitalCount: 10,
							// 		voiceCount: 1,
							// 		maxVoiceCount: 10,
							// 		produceCount: 11,
							// 		maxProduceCount: 12,
							// 		endTime: '2024-09-28 至 2024-10-08'
							// 	}
							// ]
							// this.$refs.paging.complete(arr);
							this.$util.msg(res.msg);
							this.$refs.paging.complete(false);
						}
					}).catch(err => {
						this.$util.msg('请检查网络连接！');
						this.$refs.paging.complete(false);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.red {
		color: #eb5e00;
	}

	.toptab {
		width: 100%;
		height: 120rpx;
		// background-color: #fff;
		padding: 0 50rpx;

		.opc {
			opacity: 0.5;
		}

		.tab_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 200rpx;
			font-size: 30rpx;
			color: #202020;

			.line {
				width: 42rpx;
				height: 6rpx;
				background: #000000;
				border-radius: 10rpx;
				overflow: hidden;
				margin-top: 12rpx;
			}

			.line_fff {
				width: 42rpx;
				height: 6rpx;
				// background: #fff;
				border-radius: 10rpx;
				margin-top: 14rpx;
			}
		}
	}

	.list {
		margin: 0 30rpx;
		width: 750rpx;
		height: calc(100vh - 140rpx);
		background-color: #edf0f4;

		.box1 {
			width: 690rpx;
			border-radius: 20rpx;

			.box_item1 {
				padding: 40rpx;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				background: #ffffff;
				border-radius: 20rpx;

				.line {
					margin-top: 40rpx;
					width: 633rpx;
					height: 1rpx;
					border: 1rpx solid #979797;
					opacity: 0.2;
				}

				.content {
					margin-top: 30rpx;
					font-size: 24rpx;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.btn {
		background-color: #ffffff;
		margin-bottom: 30rpx;
		height: 120rpx;
		border-radius: 10rpx;
		color: #131415;
		font-weight: 500;
	}
</style>